<template>
  <div id="formLogin">
    <div class="regAccount" @click="register">注册账号</div>
    <div class="title">
      <div style="font-size: 30px">欢迎来到</div>
      <div style="font-size: 40px">蓝宝石平台</div>
    </div>
    <van-form validate-first @failed="onFailed" @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <div class="label-calss">
        <div><van-icon name="contact" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="text"
            v-model="account"
            placeholder="请输入账号"
            class="input-text"
          />
        </div>
      </div>

      <div class="label-calss">
        <div><van-icon name="eye-o" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="password"
            v-model="password"
            placeholder="请输入密码"
            class="input-text"
          />
        </div>
      </div>

      <div class="forget" @click="forget">忘记密码</div>

      <!-- 通过 validator 进行函数校验 -->

      <div class="login-btn" @click="onSubmit">登 录</div>
    </van-form>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Form,
  Toast,
  Button,
  Field,
  Image as VanImage,
  Icon,
  Dialog,
} from "vant";
import { login } from "../../api/login";

Vue.use(Form)
  .use(Toast)
  .use(Button)
  .use(Field)
  .use(VanImage)
  .use(Icon)
  .use(Dialog);

export default {
  data() {
    return {
      account: "",
      password: "",
      isLogin: true,
    };
  },
  created() {},
  methods: {
    register() {
      this.$router.push({ path: "register" });
    },
    forget() {
      this.$router.push({ path: "forget" });
    },
    onFailed(errorInfo) {
      console.log("faile rorInfo");
    },
    // 提交数据
    onSubmit() {
      // var regAccount = /^[0-9a-zA-Z]*$/g;
      // if (this.account.length <= 0 || !regAccount.test(this.account)) {
      //   Toast("账号只允许字母或数字组合！");
      //   return;
      // }
      if (this.account.indexOf("@") != -1) {
        // 邮箱
        if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.account)) {
          Toast("请输入正确的邮箱格式！");
          return;
        }
      } else {
        // 手机号
        if (!/^1\d{10}$/.test(this.account)) {
          Toast("请输入正确的手机号码！");
          return;
        }
      }
      if (this.password.length <= 0) {
        Toast("请输入密码！");
        return;
      }
      login({ account: this.account, password: this.password }).then((res) => {
        localStorage.setItem("baoShi_Token", res.data.access_token);
        localStorage.setItem("user_id", res.data.member.id);
        Dialog.alert({
          message: "登录成功！",
          theme: "round-button",
        })
          .then(() => {
            this.$router.push({ path: "store" });
          })
          .catch((err) => {});
      });
    },
  },
};
</script>

<style scoped>
#formLogin {
  background: #1b2b42;
  min-height: 100vh;
  font-size: 18px;
  width: 100%;
  height: 100vh;
}
.regAccount {
  color: #25a68d;
  width: 90%;
  text-align: right;
  padding-top: 20px;
  margin-bottom: 20px;
}
.title {
  color: #fff;
  text-align: left;
  line-height: 60px;
  margin-left: 10%;
  margin-top: 60px;
  margin-bottom: 60px;
}
.van-cell {
  background: #1b2b42;
  /* line-height: 40px; */
}
.label-calss {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #21344d;
  color: #fff;
  width: 90%;
}
.input-text {
  border: none;
  background: none;
  color: #536680;
}
.forget {
  width: 90%;
  text-align: right;
  color: #536680;
  font-size: 18px;
}
.login-btn {
  margin: 30px 5%;
  background: #2b405d;
  color: #7489a4;
  line-height: 60px;
  font-size: 18px;
  border-radius: 10px;
}
</style>
